<template>
  <div
    class="wh-full flex-center z-10"
    :style="{background: bgColor}"
  >
    <el-card class="w-auto !rounded-3xl w-110 z-10">
      <div class="flex justify-around h-20 items-center">
        <yang-logo
          icon-class="w-20 h-full"
          text-class="font-medium text-3xl"
        />
      </div>
      <main class="p-8">
        <h3 class="text-18px font-medium text-primary mb-5">{{ actionModule.label }}</h3>
        <transition
          name="fade-slide"
          mode="out-in"
          appear
        >
          <component :is="actionModule.component" />
        </transition>
      </main>
    </el-card>
    <login-bg
      :theme-color="theme.themeColor"
    />
  </div>
</template>

<script setup lang='ts'>
import { computed  } from 'vue';
import type { Component } from 'vue';
import { ElCard } from 'element-plus';
import { LoginBg, PwdLogin, Register } from './components';
import { useThemeStore } from '~/src/store';
import { mixColor } from '@/utils';
import { EnumLoginModule } from '@/enum';

interface Props {
  module?: EnumType.LoginModuleKey
}
const props = defineProps<Props>();
const theme = useThemeStore();
const bgColor = computed(() => {
  const COLOR_WHITE = '#ffffff';
  // const ratio = theme.darkMode ? 0.5 : 0.2;
  return mixColor(COLOR_WHITE, theme.themeColor, 0.2);
});

interface LoginModule {
  key: keyof typeof EnumLoginModule;
  label: EnumLoginModule;
  component: Component;
}

const modules: LoginModule[] = [
  { key: 'pwd-login', label: EnumLoginModule['pwd-login'], component: PwdLogin },
  { key: 'register', label: EnumLoginModule['register'], component: Register }
];

const actionModule = computed(() => {
  const active: LoginModule = { ...modules[0] };
  const findItem = modules.find(item => item.key === props.module);
  if (findItem) {
    Object.assign(active, findItem);
  }
  return active;
});

</script>
<style scoped>

</style>
